<template>
  <div>
    <el-card>
        <div slot="header" class="clearfix">
            <span>卡片名称</span>
        </div>
        <div>
            <el-button type="primary" @click="$router.push('/advert/create')">添加广告</el-button>
            <el-table
                :data="advertList"
                style="width: 100%">
                <el-table-column
                    prop="id"
                    label="id"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="广告名称"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="address"
                    label="广告位置">
                </el-table-column>
                <el-table-column
                   label="广告图" :formatter="getImg">
                </el-table-column>
                <el-table-column
                    label="时间" :formatter="getTimes">
                </el-table-column>
                <el-table-column
                    label="上线/下线">
                  <template slot-scope="scope">
                    <el-switch
                        v-model="scope.row.status"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        :active-value="1"
                        :inactive-value="0"
                        @change="onStateChange(scope.row)"
                    >
                    </el-switch>
                  </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                  <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="primary" size="small">编辑</el-button>
                  </template>
                </el-table-column>
            </el-table>
        </div>
    </el-card>
  </div>
</template>

<script>
import { getAdList, saveOrUpdate } from '@/services/advert.js'

export default {
  data () {
    return {
      form: {
        currentPage: 1,
        size: 10
      },
      advertList: []
    }
  },
  methods: {
    onStateChange (row) {
      const message = row.status === 1 ? '确定上线吗？' : '确定下线么？'
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data } = await saveOrUpdate(row)
        console.log(data)
        if (data.state === 1) {
          this.$message.success(row.status === 1 ? '已上线' : '已下线')
        }
      }).catch(e => {
        row.status = row.status * (-1) + 1
        this.$message.info('取消修改')
      })
    },
    handleClick (row) {
      console.log(row)
      this.$router.push('/advert/' + row.id + '/edit')
    },
    getImg (row) {
      const url = row.img
      return <img style='width:100px;max-height:70px' src={url}/>
    },
    getTimes (row) {
      return `开始时间：${row.startTimeFormatString} 结束时间：${row.endTimeFormatString}`
    },
    async loadData () {
      const { data } = await getAdList(this.form)
      if (data.state === 1) {
        this.advertList = data.content
      }
    }
  },
  created () {
    this.loadData()
  }
}
</script>

<style>
.myPage{
  text-align: center;
  margin-top: 20px;
}
</style>
